<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>网盘</title>
    <link rel="stylesheet" href="./css/style.css"/>
    <script src="./js/jquery.min.js"></script>
</head>
<body>

<div class="header clearFix">
    <div class="logo"><img src="./img/logo.png" alt="" width="150" height="70"/></div>

    <div class="user"><img src="./img/avatar.jpg" class="user_header">
        <div class="moreMenu"><img src="./img/more.jpg">
            <div class="dropdown_menu animated fadeInUp">
                <a href="#">链接一</a>
                <a href="#">链接二</a>
                <a href="#">链接三</a>
            </div>

        </div>
    </div>

    <div class="search"><input type="text" placeholder="搜索文件"></div>
</div>

<div class="wrapper">
    <div class="leftMenu">
        <ul>
            <li class="active"><a href="javascript:;"><img src="./img/icon1.png" alt=""/>全部文件</a></li>
            <li><a href="javascript:;"><img src="./img/icon2.png" alt=""/>文档</a> <span class="new">4 new</span></li>
            <li><a href="javascript:;"><img src="./img/icon3.png" alt=""/>视频</a></li>
            <li><a href="javascript:;"><img src="./img/icon4.png" alt=""/>种子</a> <span class="new">4 new</span></li>
            <li><a href="javascript:;"><img src="./img/icon5.png" alt=""/>图片</a></li>
            <li><a href="javascript:;"><img src="./img/icon6.png" alt=""/>其它</a></li>
            <li><a href="javascript:;"><img src="./img/icon7.png" alt=""/>删除</a></li>
        </ul>
    </div>
    <div class="rightContent">
        <div class="option">
            <button type="button" class="btn btn-info"><i class="icon icon_upload"></i>上传文件</button>
            <button type="button" class="btn btn-default"><i class="icon icon_new"></i>新建文件夹</button>
            <button type="button" class="btn btn-default"><i class="icon icon_down"></i>离线下载</button>

            <p class="pull-right">
                <span class="pull-right view">
                    <a href="javascript:;" class="view_1" title="列表显示"></a>
                    <a href="javascript:;" class="view_2 active" title="图形显示"></a>
                </span>

                <a href="javascript:;" class="sort" title="按文件名升序排列"><i class="sort_up"></i>文件名</a>
            </p>
        </div>

        <div class="content">
            <ul id="listContent">
                <li><img src="./img/file1.png"> 新建文件夹1 </li>
                <li><img src="./img/file1.png"> 新建文件夹2 </li>
                <li><img src="./img/file1.png"> 新建文件夹3 </li>
                <li><img src="./img/file1.png"> 新建文件夹4 </li>
                <li><img src="./img/file1.png"> 新建文件夹5 </li>
                <li><img src="./img/file1.png"> 新建文件夹6 </li>
                <li><img src="./img/file2.png"> 手机文件夹 </li>
                <li><img src="./img/file1.png"> 名字很长名字很长名字很长 </li>
                <li><img src="./img/file1.png"> 新建文件夹3 </li>
                <li><img src="./img/file3.png"> 图片文件 </li>
                <li><img src="./img/file1.png"> 新建文件夹5 </li>
                <li><img src="./img/file1.png"> 新建文件夹6 </li>
                <li><img src="./img/file4.png"> 2010123004954 </li>
            </ul>
        </div>



    </div>
</div>


<script>
    $(function () {


    });
</script>
</body>
</html>